<template>
	<!-- 信息卡片 -->
	<view class="diy-sharingGoods" :style="[{'background': background}]">
		<view class="goods-itemss">
			<form @submit="_onTargetUrls" report-submit="true">
				<button form-type="submit" class="btn-normal dis-flex" >
					<view class="goods-itemss_left">
						<image mode="aspectFill" :src="dataList[0].image"></image>
					</view>
					<view class="goods-itemss_right">
						<view v-if="dataList[0].title" class="goods-itemss_title twolist-hidden">
							<text>{{ dataList[0].title }}</text>
						</view>
						<view class="goods-itemss_desc">
							<view v-if="dataList[0].content" class="desc-selling_point">
								<text>{{ dataList[0].content }}</text>
							</view>
						</view>
						<view class="btn-settlement" @tap.stop="_onTargetBtnUrls">{{dataList[0].btntxt}}</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			paddingTop() {
				return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			},
			background() {
				return this.itemStyle.background;
			},
			paddingLeft() {
				return uni.upx2px(this.itemStyle.paddingLeft * 2) + 'px';
			}
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			//跳转
			menuClick(url) {
				if (url == '') {
					return
				}else if(url.substring(0,4) == 'page'){
					return this.navigationTo({
					//只能跳转到程序内页面
					url: url
					});
				}else{
					return this.openBrowser(url)
				}
			},

			/**
			 * 跳转商品详情页
			 */
			_onTargetUrls() {
				let url = this.dataList[0].url;
				this.menuClick(url)
			},
			
			/**
			 * 跳转商品详情页
			 */
			_onTargetBtnUrls() {
				let url = this.dataList[0].btnurl;
				this.menuClick(url)
			},
		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 商品组 */

	.diy-sharingGoods {
		padding: 20upx;
	}

	.goods-itemss {
		height: 143px;
		margin-bottom: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		background: #fff;
	}

	.goods-itemss:last-child {
		margin-bottom: 0;
	}

	/* 商品图片 */

	.goods-itemss_left {
		display: flex;
		width: 40%;
		background: #fff;
		align-items: center;
	}

	.goods-itemss_left image {
		display: block;
		width: 240upx;
		height: 240upx;
	}

	.goods-itemss_right {
		position: relative;
		width: 60%;
	}

	/* 商品名称 */

	.goods-itemss_right .goods-itemss_title {
		height: 72upx;
		/* margin-top: 20upx; */
		font-size: 28upx;
		line-height: 1.3;
		color: #333;
		font-weight:700;
	}

	.goods-itemss_desc {
		/* margin-top: 16upx; */
	}

	/* 商品卖点 */

	.desc-selling_point {
		/* width: 400upx;
		height: 32upx;
		font-size: 24upx;
		line-height: 1.4;
		color: #333; */
		
		width: 200px;
		font-size: 12px;
		line-height: 1.4;
		word-wrap: normal;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #333;
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}


	/* 去拼团按钮 */
	.goods-itemss .btn-settlement {
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 0 28upx;
		border-radius: 40upx;
		background: linear-gradient(to right, #539a86 0%, #1ec74e 100%);
		box-shadow: 0 2px 10px -2px #40755f;
		font-size: 28upx;
		line-height: 54upx;
		text-align: center;
		color: #fff;
	}
</style>
